<script setup>
import { showToast } from 'vant'
import { ref } from 'vue'
import { useCartStore } from '@/stores/cart.js'
import { reactive } from 'vue'
const onSubmit = () => showToast('点击按钮')
const onClickLink = () => showToast('修改地址')

const show = ref(false)
const cartStore = useCartStore()
console.log(cartStore.cartList.value)
function actionSheet() {
  show.value = true
}
//全选
const checkedAll = ref(false)
const checkedList = reactive([false, false, false, false])
//全选按钮的实现思想：为全选按钮绑定change事件（回调参数为布尔类型），利用循环数组下标循环所有，并为循环的所有的值更改为全选按钮的值
function handleCheckAll(checkedAll) {
  for (let index = 0; index < checkedList.length; index++) {
    checkedList[index] = checkedAll
  }
}
//通过每一个选择按钮，来改变全选按钮的状态
function handleCheck(checked, item) {
  // 计数
  let flag = 0
  for (let index = 0; index < checkedList.length; index++) {
    if (checkedList[index] === true) {
      flag++
      // debugger
    }
  }

  if (flag === checkedList.length) checkedAll.value = true

  // 通过判断：若为true，将选中商品添加到checkedGoods数组里
  // 否则，意味着取消勾选，遍历查找标题重复的商品，取其下标作为参数，通过splice删除
  if (checked === true) {
    checkedGoods.push(item)
  } else {
    let firstLocation = 0
    checkedGoods.forEach((good, index) => {
      if (good.title === item.title) {
        firstLocation = index
      }
    })
    checkedGoods.splice(firstLocation, 1)
  }
}
// 定义选中商品的数组
const checkedGoods = reactive([])

// 已选商品全部展开
const showNum = ref(3)
function handleDisplayAll() {
  if (showNum.value === 3) {
    showNum.value = checkedGoods.length
  } else {
    showNum.value = 3
  }
}
</script>

<template>
  <p style="text-align: center">购物车</p>
  <div class="main" style="position: relative">
    <van-submit-bar :price="3060" text-align="left" button-text="提交订单" @submit="onSubmit" style="bottom: 50px">
      <!-- 全选按钮 -->
      <van-checkbox v-model="checkedAll" @change="handleCheckAll">全选</van-checkbox>
      <div class="detail" style="color: red; margin: 0 10px 0 20px">
        <span @click="actionSheet">查看详情</span>
        <van-icon name="arrow-up" />
      </div>

      <template #tip>
        <div v-show="cartStore.cartList.value">
          你的收货地址不支持配送,
          <span @click="onClickLink" style="color: rgb(79, 120, 245)">修改地址</span>
        </div>
      </template>

      <div class="sheet">
        <van-action-sheet v-model:show="show" title="金额明细">
          <div class="content">
            <div class="img-warpper">
              <img :src="item.thumb" v-for="(item, index) in checkedGoods?.slice(0, showNum)" :key="index"
                style="width: 25%" />

              <span class="buyed-num" @click="handleDisplayAll">已选{{ checkedGoods?.length }}件
                <!-- 三目运算符 -->
                <!-- 方法一:动态修改内容 -->
                <!-- <span class="arrow">{{ showNum <= 3 ? '>' : '<' }}</span> -->
                <!-- 方法二：动态修改类名 -->
                <span :class="showNum <= 3 ? 'arrow' : 'arrow-reserve'">></span>
              </span>
            </div>
            <p>商品总价</p>
            <p>共减</p>
            <p>合计</p>
          </div>
        </van-action-sheet>
      </div>
    </van-submit-bar>

    <!-- 设置空状态 -->
    <van-empty v-if="!cartStore.cartList.value" image="error" description="购物车空啦" />

    <van-swipe-cell v-for="(item, index) in cartStore.cartList.value" :key="index">
      <van-checkbox v-model="checkedList[index]" @change="(checked) => handleCheck(checked, item)">选择</van-checkbox>
      <van-card :num="item.num" :price="item.price" :title="item.title" :thumb="item.thumb" />
      <!-- 利用插槽左右滑动单元格 -->
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" style="height: 100%" />
        <van-button square type="primary" text="收藏" class="delete-button" style="height: 100%" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 10px;
}

.buyed-num {
  text-align: center;
  width: 25%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 100px;
  vertical-align: top;

  .arrow {
    transform: rotate(90deg) scale(1, 1.5);
  }

  .arrow-reserve {
    transform: rotate(-90deg) scale(1, 1.5);
  }
}
</style>
